﻿@{
    ViewBag.Title = "ListAdvertise";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@section scripts
{
    <script type="text/javascript" src="~/Scripts/App/Admin/advertise_list.js"></script>
}

<div class="content-header">
    <div class="header-section">
        <h1>
            <i class="gi gi-certificate"></i>Quản Lý Quảng Cáo<br>
            <small>Danh Sách</small>
        </h1>
    </div>
</div>
<ul class="breadcrumb breadcrumb-top">
    <li><a href="../Admin/index"><i class="fa fa-home"></i></a></li>
    <li><a href="../Admin/ListAdvertise">Quảng Cáo</a></li>
    <li><a href="../Admin/ListAdvertise">Quản Lý</a></li>
</ul>

<div class="tab-content">
    <div id="listads-div" class="block block-alt-noborder tab-pane fade in active animation-slideRight">
        <div class="row">
            <div class="pull-right col-md-2" style="margin-left: 10px"><a href="Addadvertise" class="btn btn-block btn-success">Tạo Mới</a></div>
            <div class="dataTables_filter" id="example-datatable_filter">
                <div class="input-group">
                    <input type="text" data-bind="instantValue: SearchString, event: { keypress: $root.EnterSendMsg }" aria-controls="example-datatable" class="form-control" placeholder="Tìm Kiếm">
                    <span class="input-group-addon" style="cursor: pointer" data-bind="click: $root.SendMsg">
                        <i class="fa fa-search"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-vcenter table-striped table-hover">
                <thead>
                    <tr>
                        <th class="text-center" style="width: 150px;"><i class="hi hi-picture"></i></th>
                        <th>Tên Quảng Cáo</th>
                        <th>Người Đăng QC</th>
                        <th>Thông Số</th>
                        <th class="text-center" style="width: 200px;">Thao Tác</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: Advertises">
                    <tr>
                        <td class="text-center">
                            <img width="64" height="64" alt="preview" data-bind="attr: { src: PreviewImg }"></td>
                        <td><a href="#" data-bind="text: Title"></a></td>
                        <td data-bind="text: CompanyName"></td>
                        <td>
                            <label class="label label-warning" data-bind="text: Likes + ' Thích'"></label>
                            <label class="label label-success" data-bind="text: Views + ' Xem'"></label>
                            <label class="label label-info" data-bind="text: Rate + ' Sao'"></label>
                        </td>
                        <td class="text-center">
                            <div class="btn-group btn-group-xs">
                                <a class="btn btn-xs btn-default" href="#editad-div" data-toggle="tab" data-bind="click: $root.doView">
                                    <i class="fa fa-pencil"></i>Sửa</a>
                                <a class="btn btn-xs btn-info" href="#viewad-div" data-toggle="tab" data-bind="click: $root.doView">
                                    <i class="gi gi-eye_open"></i>Xem</a>
                                <button class="btn btn-xs btn-danger" data-bind="click: $root.doDelete">
                                    <i class="fa fa-times"></i>Xóa</button>
                            </div>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="5">
                            <div class="col-md-4 pull-right">
                                <ul class="pager">
                                    <li class="prev" data-bind="css: { disabled: IsPrevious() === false }">
                                        <a href="#" data-bind="    click: $root.doPrevious">← Trang Trước</a>
                                    </li>
                                    <li class="next" data-bind="css: { disabled: IsNext() === false }">
                                        <a href="#" data-bind="    click: $root.doNext">Trang Sau →</a>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <i class="fa fa-asterisk fa-spin fa-2x" data-bind="visible: Loaded()"></i>
    </div>
    <div id="editad-div" class="tab-pane animation-slideRight fade">
        <form id="editAd-frm" data-bind="submit: $root.doEditAdv" class="form-horizontal form-bordered" novalidate="novalidate">
            <div class="form-group">
                <label for="val_title" class="col-md-4 control-label">Tên Quảng Cáo<span class="text-danger">*</span></label>
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="text" placeholder="Tên Quảng Cáo..." class="form-control" name="val_title" data-bind="value: Title" id="val_title">
                        <span class="input-group-addon"><i class="gi gi-nameplate"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="val_pname" class="col-md-4 control-label">Tên Sản Phẩm<span class="text-danger">*</span></label>
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="text" placeholder="Tên Quảng Cáo..." class="form-control" name="val_pname" id="val_pname" data-bind="value: ProductName">
                        <span class="input-group-addon"><i class="gi gi-nameplate"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="val_shortdes" class="col-md-4 control-label">Sơ Lượt<span class="text-danger">*</span></label>
                <div class="col-md-6">
                    <div class="input-group">
                        <textarea placeholder="Tóm Lượt..." rows="6" class="form-control" style="resize: none" name="val_shortdes" id="val_shortdes" data-bind="value: ShortDes"></textarea>
                        <span class="input-group-addon"><i class="gi gi-nameplate"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="row text-center">
                    <label>Miêu Tả Chung</label>
                </div>
                <div class="col-xs-12">
                    <textarea class="form-control ckeditor" name="val_description" id="ckeditor-des" rows="6"></textarea>
                </div>
            </div>
            <div class="form-group form-actions">
                <div class="col-md-8 col-md-offset-4">
                    <button class="btn btn-sm btn-primary" type="submit"><i class="fa fa-arrow-right"></i>Lưu Thay Đổi</button>
                    <a class="btn btn-sm btn-warning" href="#listads-div" data-toggle="tab" type="button"><i class="gi gi-sort"></i>Danh Sách</a>
                </div>
            </div>
        </form>
    </div>
    <div id="viewad-div" class="block tab-pane animation-slideRight fade">
        <div class="widget">
            <div class="widget-simple themed-background-dark">
                <a class="widget-icon pull-right themed-background" href="javascript:void(0)">
                    <i class="gi gi-film animation-floating"></i>
                </a>
                <h4 class="widget-content widget-content-light">
                    <a href="javascript:void(0)" data-bind="text: Title"></a>
                    <small>by <a href="#" data-bind="text: CompanyName"></a></small>
                </h4>
            </div>
            <div class="widget-extra themed-background">
                <div class="row text-center">
                    <div class="col-xs-4">
                        <h3 class="widget-content-light">
                            <i class="fa fa-heart"></i>
                            <br>
                            <small data-bind="text: Likes() + ' Lượt Thích'"></small>
                        </h3>
                    </div>
                    <div class="col-xs-4">
                        <h3 class="widget-content-light">
                            <i class="gi gi-eye_open"></i>
                            <br>
                            <small data-bind="text: Views() + ' Lượt Xem'"></small>
                        </h3>
                    </div>
                    <div class="col-xs-4">
                        <h3 class="widget-content-light">
                            <i class="fa fa-star"></i>
                            <br>
                            <small data-bind="text: Rate() + ' Sao'"></small>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="widget-extra">
                <div class="row">
                    <div class="col-md-7">
                        <div class="widget-extra-full themed-background-dark-autumn" data-bind="visible: IsImage">
                            <div id="ads-img-slide" class="carousel slide remove-margin">
                                <div class="carousel-inner" data-bind="foreach: Medias">
                                    <div class="item" data-bind="css: { 'active': $index() == 0 }">
                                        <img width="666" height="395" data-bind="attr: { src: MediaLink }" alt="image">
                                    </div>
                                </div>
                                <a class="left carousel-control" href="#ads-img-slide" data-slide="prev">
                                    <span><i class="fa fa-chevron-left"></i></span>
                                </a>
                                <a class="right carousel-control" href="#ads-img-slide" data-slide="next">
                                    <span><i class="fa fa-chevron-right"></i></span>
                                </a>
                            </div>
                        </div>
                        <div data-bind="foreach: Medias, visible: IsVideo">
                            <div class="video-js-box">
                                <iframe width="100%" height="315" data-bind="src: '//www.youtube.com/embed/' + MediaLink " frameborder="0" allowfullscreen></iframe>
                            </div>
                        </div>
                        <div data-bind="foreach: Medias, visible: IsFlash">
                            <object width="100%" height="315" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
                                <param name="movie" data-bind="value: MediaLink" />
                                <embed width="100%" height="315"  type="application/x-shockwave-flash" data-bind=" src: MediaLink" />
                            </object>
                        </div>
                    </div>
                    <div class="col-md-5" style="margin-top: 30px">
                        <table class="table table-borderless table-striped">
                            <tbody>
                                <tr>
                                    <td style="width: 30%;"><strong>Tên Sản Phẩm</strong></td>
                                    <td><a href="javascript:void(0)" class="label label-warning" data-bind="text: ProductName">University Name</a></td>
                                </tr>
                                <tr>
                                    <td><strong>Sơ Lượt</strong></td>
                                    <td data-bind="text: ShortDes"></td>
                                </tr>
                                <tr>
                                    <td><strong>Ngày Đăng</strong></td>
                                    <td><a class="label label-success" data-bind="text: DateCreated" href="javascript:void(0)">Company Inc</a></td>
                                </tr>
                                <tr>
                                    <td><strong>Định Dạng</strong></td>
                                    <td><a class="label label-danger" href="javascript:void(0)" data-bind="text: Name">168</a></td>
                                </tr>
                                <tr>
                                    <td><strong>Loại Quảng Cáo</strong></td>
                                    <td data-bind="foreach: Categories">
                                        <a data-bind="attr: { href: '#' + CatId }, text: Name" class="label label-info"></a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="block">
                    <div class="block-title">
                        <div class="block-options pull-right">
                            <button data-toggle="collapse" class="btn btn-alt btn-sm btn-primary" data-target="#description_div"><i class="fa fa-arrows-v"></i></button>
                        </div>
                        <h2>Miêu Tả Chung</h2>
                    </div>
                    <div class="block-content collapse" id="description_div">
                        <p data-bind="html: Description"></p>
                    </div>
                    <p class="text-muted">Nhấn Nút <i class="fa fa-arrows-v"></i>để ẩn hoặc hiển thị nội dung</p>
                </div>
            </div>
            <div class="widget-extra">
                <div class="block">
                    <h4 class="sub-header">Bình Luận</h4>
                    <ul class="media-list" data-bind="foreach: Comments">
                        <li class="media">
                            <a class="pull-left" href="page_ready_user_profile.php">
                                <img width="64" height="64" class="img-circle" alt="Avatar" src="~/Advertise/DefaultAssets/v_avatar.png" data-bind="attr: { src: Avatar }">
                            </a>
                            <div class="media-body">
                                <a href="page_ready_user_profile.php"><strong data-bind="text: Name">John Doe</strong></a>
                                <span class="text-muted"><small><em data-bind="timeAgo: DateComment">30 min ago</em></small></span>
                                <p data-bind="text: Content"></p>
                                <a href="#hide" data-bind="click: $root.doEditComment, text: Hide ? 'Enable' : 'Hide'">Hide</a>
                                <a href="#spam" data-bind="click: $root.doEditComment, text: Spam ? 'Not Spam' : 'Spam'">Spam</a>
                            </div>
                        </li>
                    </ul>
                    <div class="row text-center">
                        <a class="btn btn-xs btn-default push" href="javascript:void(0)">View more..</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row text-center">
            <a class="btn btn-sm btn-default" href="#editad-div" data-toggle="tab"><i class="fa fa-pencil"></i>Sửa</a>
            <a class="btn btn-sm btn-warning" href="#listads-div" data-toggle="tab"><i class="gi gi-sort"></i>Danh Sách</a>
        </div>
    </div>
</div>
